<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="keyword" placeholder="请输入关键词："/>
        <button @click="searchStudents">搜索</button>
        <table border="1px" width="800px">
            <tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>电话</th><th>住址</th></tr>
            <tr v-for="stu in students" :key="student.id">
                <td>{{stu.id}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.gender}}</td>
                <td>{{stu.cellphone}}</td>
                <td>{{stu.address}}</td>
            </tr>
        </table>
    </div>

    <script src="js/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                keyword:'',
                students:[] //学生集合
            },
            methods:{
                //搜索学生
                searchStudents(stu){
                    axios.get("http://localhost:8080/searchStudents?keyword="+ this.keyword)
                        .then(result =>{
                            console.log(result.data)
                            if(result.data.code ==  200){
                                //把后台的数据绑定到模型中
                                this.students = result.data.data;
                            }
                        })
                }
            },
            mounted(){
                //调用加载学生方法
                this.searchStudents()
            }
        })
    </script>
</body>
</html>